<template>
  <el-container direction="horizontal">
    <el-aside>
      <tag-tree @selectParent="selectParent" v-if="tagTreeUpdate" ref="tree"></tag-tree>
    </el-aside>
    <el-main>
      <div class="container">
        <el-form id="form">
          <el-form-item label="标签名">
            <el-input v-model="addForm.tagName" :disabled="!editable"></el-input>
          </el-form-item>
          <el-form-item label="标签描述">
            <el-input v-model="addForm.tagContent" :disabled="!editable"></el-input>
          </el-form-item>
          <el-form-item label="父标签">
            <el-col :span="10">
              <el-input v-model="dto.parentTagName" :disabled="true"></el-input>
            </el-col>
            <el-col :span="5">
            <el-button type="primary" @click="show" :disabled="!editable">选择</el-button>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" @click="resetParentTag" :disabled="!editable">清空父标签</el-button>
            </el-col>
          </el-form-item>
          <el-form-item v-if="!readOnly">
            <el-col :span="10">
              <el-button type="primary" @click="addTag">{{update ? '更新': '新建'}}</el-button>
            </el-col>
          </el-form-item>
        </el-form>
        <tags-pick-dialog v-if="showPick"></tags-pick-dialog>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import TagsPickDialog from '../components/TagsPickDialog'
  import TagTree from '../components/TagTree'
  export default {
    name: 'add',
    components: { TagTree, TagsPickDialog },
    data() {
      return {
        addForm: {
          id: null,
          tagName:'',
          tagContent:'',
          parentId:null,
        },
        dto:{
          parentTagName: null,
        },
        showPick: false,
        editable: true,
        readOnly: false,
        update: false,

        tagTreeUpdate: true,
      }
    },
    props: {

    },
    created() {
      // console.log(this.$route)
      this.editable = this.$route.params.editable != null ? this.$route.params.editable : this.editable;
      this.readOnly = this.$route.params.readOnly != null ? this.$route.params.readOnly : this.readOnly;
      this.update = this.$route.params.update != null ? this.$route.params.update : this.update;
      this.addForm.id = this.$route.params.tagId !=null  ? this.$route.params.tagId : this.addForm.id;
      if (this.readOnly || this.update) {
        this.getTagInfo(this.addForm.id);
      }
    },
    mounted() {
    },
    activated() {
      // this.editable = this.$route.params.editable ? this.$route.params.editable : this.editable;
      // this.readOnly = this.$route.params.readOnly ? this.$route.params.readOnly : this.readOnly;
      // this.update = this.$route.params.update ? this.$route.params.update : this.update;
    },
    methods: {
      show() {
        this.showPick = true;
      },
      getTagInfo() {
        this.$api.getTagInfo(this.addForm.id)
          .then(res => {
            this.addForm.tagName = res.tagName;
            this.addForm.tagContent = res.tagContent;
            this.parentId = res.parentId;
            this.dto.parentTagName = res.parentTagName;
          })
      },
      selectParent({id, tagName}) {
        if (this.editable) {
          console.log(1)
          this.addForm.parentId = id;
          this.dto.parentTagName = tagName;
        }
      },
      addTag() {
        let formData = {...this.addForm}
        if (!this.update) {
          delete formData['id']
          this.$api.addTag(formData).then(res => {
            this.$refs.tree.$emit("update");
          })
        } else {
          this.$api.updateTag(formData).then(res => {
            this.$refs.tree.$emit("update");
          })
        }
      },
      resetParentTag() {
        this.addForm.parentId = null;
        this.dto.parentTagName = null;
      }
    },
  }
</script>

<style scoped>
  .container {
    width: 100%;
    /*height: 100%;*/
    padding: 10px;
    /*text-align: center;*/
  }
</style>
